// // src/components/VoiceControl.tsx
// import React, { useState, useEffect } from 'react';
// import { Button, Slider, Select, Space, Tooltip } from 'antd';
// import { SoundOutlined, PauseOutlined } from '@ant-design/icons';
// import ttsService from '@/servers/ttsService';

// const VoiceControl: React.FC<{ text: string }> = ({ text }) => {
//   const [isPlaying, setIsPlaying] = useState(false);
//   const [rate, setRate] = useState(1.0);
//   const [pitch, setPitch] = useState(1.0);
//   const [volume, setVolume] = useState(1.0);
//   const [voices, setVoices] = useState<SpeechSynthesisVoice[]>([]);
//   const [currentVoice, setCurrentVoice] = useState<SpeechSynthesisVoice | null>(null);
  
//   useEffect(() => {
//     if (ttsService.isSupported()) {
//       // 等待语音加载
//       const timer = setInterval(() => {
//         const voices = ttsService.getAvailableVoices();
//         if (voices.length > 0) {
//           setVoices(voices);
//           setCurrentVoice(ttsService.getCurrentVoice());
//           clearInterval(timer);
//         }
//       }, 500);
      
//       return () => clearInterval(timer);
//     }
//   }, []);
  
//   const handleSpeak = () => {
//     if (isPlaying) {
//       ttsService.stop();
//       setIsPlaying(false);
//     } else {
//       ttsService.speak(text, { rate, pitch, volume });
//       setIsPlaying(true);
      
//       // 设置结束监听
//       const timer = setInterval(() => {
//         if (!ttsService.isSpeaking()) {
//           setIsPlaying(false);
//           clearInterval(timer);
//         }
//       }, 100);
//     }
//   };
  
//   const handleVoiceChange = (value: string) => {
//     ttsService.setVoice(value);
//     setCurrentVoice(voices.find(v => v.name === value) || null);
//   };
  
//   if (!ttsService.isSupported()) {
//     return (
//       <div className="voice-not-supported">
//         您的浏览器不支持文本转语音功能
//       </div>
//     );
//   }
  
//   return (
//     <div className="voice-control">
//       <Space>
//         <Tooltip title={isPlaying ? "停止播放" : "播放发音"}>
//           <Button 
//             type="primary" 
//             shape="circle" 
//             icon={isPlaying ? <PauseOutlined /> : <SoundOutlined />} 
//             onClick={handleSpeak}
//             size="large"
//             className="play-button"
//           />
//         </Tooltip>
        
//         <div className="voice-sliders">
//           <div className="slider-item">
//             <span>语速: </span>
//             <Slider 
//               min={0.5}
//               max={2}
//               step={0.1}
//               value={rate}
//               onChange={setRate}
//               style={{ width: 100 }}
//               tooltip={{ formatter: v => `${v}x` }}
//             />
//           </div>
          
//           <div className="slider-item">
//             <span>音调: </span>
//             <Slider 
//               min={0.5}
//               max={1.5}
//               step={0.1}
//               value={pitch}
//               onChange={setPitch}
//               style={{ width: 100 }}
//             />
//           </div>
          
//           <div className="slider-item">
//             <span>音量: </span>
//             <Slider 
//               min={0.1}
//               max={1}
//               step={0.1}
//               value={volume}
//               onChange={setVolume}
//               style={{ width: 100 }}
//             />
//           </div>
//         </div>
        
//         <Select
//           value={currentVoice?.name || ''}
//           onChange={handleVoiceChange}
//           style={{ width: 180 }}
//           placeholder="选择语音"
//           className="voice-selector"
//         >
//           {voices.map(voice => (
//             <Select.Option key={voice.name} value={voice.name}>
//               {`${voice.name} (${voice.lang})`}
//             </Select.Option>
//           ))}
//         </Select>
//       </Space>
//     </div>
//   );
// };

// export default VoiceControl;